<template>
    <el-cascader v-if="level !== 2" v-model="model" :props="dataProps" />
    <el-cascader v-else v-model="model" :props="dataProps" />
</template>

<script setup>
import { rolegeArea, rolegetCity, rolegetProvince } from '@/api/perms/city'

const props = defineProps({
    level: {
        type: Number,
        required: true
    }
})

const provinces = ref({})
const cities = ref([])
const areas = ref([])

const model = defineModel()

const dataProps = ref({
    lazy: true,
    lazyLoad: async (node, resolve) => {
        const { level } = node
        console.log('level', props.level)
        let nodes

        if (level === 0) {
            provinces.value = await rolegetProvince()
            nodes = [
                {
                    value: provinces.value.id,
                    label: provinces.value.name,
                    leaf: false
                }
            ]
        } else if (level === 1) {
            cities.value = await rolegetCity({ pid: provinces.value.id })
            nodes = cities.value.map((item) => {
                console.log(item)
                return {
                    value: item.id,
                    label: item.name,
                    leaf: props.level === 2
                }
            })
        } else if (level === 2) {
            console.log(node)
            areas.value = await rolegeArea({ pid: node.pathValues[1] })
            nodes = areas.value.map((item) => {
                return {
                    value: item.id,
                    label: item.name,
                    leaf: true
                }
            })
        }
        resolve(nodes)
    }
})

defineExpose({
    model
})
</script>

<style scoped lang="scss"></style>